<template>
    <div id="card-container">
        <div class="card" v-for="(card, _) in card_list">
            <!-- 订单状态 -->
            <div class="buy" @click="api.buy(card['id'])">购买</div>

            <!-- 商家 -->
            <div class="topic">
                <img src="../../components/icons/用户_L.svg" alt="用户图标">
                <span class="seller">商家: {{ card['owner'] }}</span>  
            </div>

            <!-- 商品像素画 -->
            <div class="appearance">
                <div v-for="i in 4" :key="i" class="ul">
                    <div v-for="j in 4" :key="`${i}-${j}`" :id="`M${i}-${j}`" :style="`background-color: ${card['appearance']['colors'][i-1][j-1]};`"></div>
                </div>
            </div>

            <!-- 内容块 -->
            <div class="item-container">
                <div class="item">
                    <img src="../../components/icons/胶囊_L.svg" alt="胶囊图标">
                    <span>产品: <b>{{ card['name'] }}</b></span>
                </div>

                <div class="item">
                    <img src="../../components/icons/价格.svg" alt="价格图标">
                    <span>价格: <b>{{ card['price'] }}</b></span>
                </div>

                <div class="item">
                    <img src="../../components/icons/时间.svg" alt="时间图标">
                    <span>过期: <b>{{ card['expires_at'].split('T')[0] }}</b></span>
                </div>
            </div>


            <!-- 商品描述 -->
            <div class="description">{{ card['description'] }}</div>
        </div>
    </div>

    <!-- 底部分页器 -->
    <div id="paginator">
        <span id="last" @click="goTo(`market?page=${page_num - 1}`)" v-if="page_num != 1">上一页</span>
        <span id="last" v-else>上一页</span>
        <div id="page-num">
            <span v-for="i in 5" @click="goTo(`market?page=${page_num + i}`)">
                {{ page_num + i }}
            </span>
        </div>
        <span id="next" @click="goTo(`market?page=${page_num + 1}`)">下一页</span>
    </div>
</template>

<script setup>
import { Api } from '@/assets/js/api';
import { goTo } from '@/assets/js/tool';
import { onMounted, ref } from 'vue';

//登录验证保护
const api = new Api();
api.check_session()

const page_num = ref(parseInt(new URLSearchParams(window.location.search).get('page')));
const card_list = ref()

onMounted(async () => {
    const response = await api.get_market_data(page_num)
    card_list.value = response;
    // console.log(card_list.value[0]['description'])
})
</script>

<style src="./market.css" scoped></style>